<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更改表格行的背景颜色</title>
<style type="text/css">
table {
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  width: 400px;
}

tr {
  height: 50px;
}

td {
  border: 1px solid;
}
</style>
</head>
<body>
  <div align="center">
    <table id="table1"></table>
  </div>
</body>
<script>
  var str = "";
  for (var a = 1; a < 4; a++) {
    str = str
        + "<tr onmouseover='cbgc(this)' onmouseout='recover(this)'>";
    // 方法中的参数不能是event，因为event特指单元格的触发事件，而非tr元素。否则只作用于悬停的单元格
    for (var b = 1; b < 4; b++) {
      str = str + "<td>";
      str = str + a * b;
      str = str + "</td>";
    }
    str = str + "</tr>";
  }
  document.getElementById("table1").innerHTML = str;
  function cbgc(obj) {
    obj.style.backgroundColor = "red";
  }
  function recover(obj) {
    obj.style.backgroundColor = "white";
  }
</script>
</html>
